<template>
<h1>响应式基础学习</h1>

<span>当前数字:{{ a }}</span>

<input type="button" value="+1" @click="a++"/>
</template>


<script setup lang="ts">
///
import {ref} from 'vue'
let a=ref(0);

alert(a.value);

//function AddCount(){
//    a++;
//    console.log(a);
//}


</script>


<!-- <template>
    <button @click="AddCount">累加1{{ count }}</button>
</template>

<script>
export default{
    data(){
        return{
            count:0//声明变量前赋值
        }
    },
    methods:{
        increment(){
            this.count++//将上面申请的编量实现累加
        }
    },
    mounted(){
        //mounted:生命周期函数钩,页面加载时执行
        console.log("当前数字为"+this.count)
    }
}
</script> -->

<!-- <template>
    <button @click="AddCount">累加1:{{ count }}</button>
</template>

<script setup lang="ts">

import {onMounted, ref} from 'vue'
//创建变量且申明为响应式数据
let count=ref(0);
//创建方法  实现参数累加
function AddCount(){
    count.value++;
    console.log(count.value);
}
//声明生命周期钩子
onMounted(()=>{
    console.log("当前数字为"+count.value)
})

</script> -->
